<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>电影列表</title>
</head>
<body>
	<div id="root"></div>

  <!-- 添加依赖，三个包，使用 CDN 引入 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

	<script type="text/babel">
		// 封装 App 组件
		class App extends React.Component {
			constructor() {
				super()
				this.state = {
					movies: ['星际穿越', '大话西游', '盗梦空间', '黑客帝国']
				}
			}

			render() {
				return (
					<div>
						<h2>电影列表</h2>
						<ul>
							{ this.state.movies.map(item => <li>{ item }</li>) }
						</ul>
					</div>
				)
			}
		}

		// 创建 root
		const root = ReactDOM.createRoot(document.querySelector('#root'))
		// 渲染组件
		root.render(<App/>)
	</script>
</body>
</html>